<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户审核管理</title>
    <link rel="stylesheet" href="/css/elementUI.css">
    <script src="/js/vue.js"></script>
    <script src="/js/elementUI.js"></script>
    <script src="/js/axios.js"></script>
    <script src="/js/util.js"></script>
</head>
<body>

<div id="app">

    <el-input v-model="query.loginName" style="width: 200px;" clearable placeholder="关键字查询"></el-input>


    <el-table
            :data="tableData"
            style="width: 100%">
        <el-table-column
                prop="id"
                label="用户id">
        </el-table-column>
        <el-table-column
                prop="loginName"
                label="登录名称">
        </el-table-column>
        <el-table-column
                prop="username"
                label="用户名">
        </el-table-column>
        <el-table-column
                prop="phonenum"
                label="手机号">
        </el-table-column>
        <el-table-column
                label="是否是管理员">
            <template slot-scope="scope">
                {{scope.row.ismanager==0?"管理员":"员工"}}
            </template>
        </el-table-column>
        <el-table-column
                label="是否系统自带">
            <template slot-scope="scope">
                {{scope.row.enable==0?"是":"否"}}
            </template>
        </el-table-column>
        <el-table-column
                label="状态">
            <template slot-scope="scope">
                {{scope.row.status=="0"?"正常":"封禁"}}
            </template>
        </el-table-column>
        <el-table-column
                label="用户名称">
            <template slot-scope="scope">
                {{scope.row.tenantName}}
            </template>
        </el-table-column>
        <el-table-column label="操作">
            <template slot-scope="scope">
                <el-button
                        size="mini"
                        @click="editRole(scope.row.id)">解封</el-button>
            </template>
        </el-table-column>
    </el-table>

    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="query.page"
            :page-sizes="[1, 2, 3, 4]"
            :page-size="query.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
    </el-pagination>





    <el-dialog title="分配角色" :visible.sync="roledialogFormVisible">


        <el-table
                :data="roleList" @selection-change="handleSelectionChange" ref="multipleTable"
                style="width: 100%">
            <el-table-column
                    type="selection"
                    width="55">
            </el-table-column>
            <el-table-column
                    prop="id"
                    label="角色id"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="rname"
                    label="角色名称">
            </el-table-column>

        </el-table>


        <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="updateUserRole">确 定</el-button>
        </div>
    </el-dialog>
</div>
<script>
    new Vue({
        el:"#app",
        data:{
            tableData:[],
            total:0,
            query:{
                loginName:"",
                page:1,
                pageSize:2
            },

            //表单相关
            dialogFormVisible: false,
            form: {
                username:"",
                password:"",
                loginName:"",
                phonenum:"",
                ismanager:"",
                issystem:"",
                status:"",
                tenantId:"",
            },
            formLabelWidth: '120px',
            mode:{
                title:"",
                url:""
            },
            tenantList:[],


            roledialogFormVisible:false,
            roleList:[],
            multipleSelection:[],
            currentUid:"",//代表当前要修改的用户id

        },
        filters:{
            format(value,arg){
                function dateFormat(date, format) {
                    if (typeof date === "string") {
                        var mts = date.match(/(\/Date\((\d+)\)\/)/);
                        if (mts && mts.length >= 3) {
                            date = parseInt(mts[2]);
                        }
                    }
                    date = new Date(date);
                    if (!date || date.toUTCString() == "Invalid Date") {
                        return "";
                    }
                    var map = {
                        "M": date.getMonth() + 1, //月份
                        "d": date.getDate(), //日
                        "h": date.getHours(), //小时
                        "m": date.getMinutes(), //分
                        "s": date.getSeconds(), //秒
                        "q": Math.floor((date.getMonth() + 3) / 3), //季度
                        "S": date.getMilliseconds() //毫秒
                    };
                    format = format.replace(/([yMdhmsqS])+/g, function (all, t) {
                        var v = map[t];
                        if (v !== undefined) {
                            if (all.length > 1) {
                                v = '0' + v;
                                v = v.substr(v.length - 2);
                            }
                            return v;
                        } else if (t === 'y') {
                            return (date.getFullYear() + '').substr(4 - all.length);
                        }
                        return all;
                    });
                    return format;
                }

                return dateFormat(value,arg);

            }
        },
        watch:{
            query:{
                deep:true,
                handler(){
                    this.initData()
                }
            }
        },
        methods:{
            updateUserRole(){
                if(this.multipleSelection.length==0){
                    this.$message.info("请选种角色")
                }else{
                    let uid = this.currentUid;
                    let rids = this.multipleSelection.map(m=>m.id).join(",");

                    axios.post(`/jiyun-user/updateUserRoleAdmin?uid=${uid}&rids=${rids}`).then(res=>{
                        this.roledialogFormVisible = false;

                        this.initData();
                    })
                }

            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },

            editRole(id){
                this.currentUid = id;
                this.roledialogFormVisible = true;
                /**
                 * 1、展示弹框，为了表格组件注册成功
                 * 2、ajax查出现有角色
                 * 3、显示角色列表
                 * 4、回显现有角色
                 */

                axios.post("/user/findUserRole?id="+id).then(res=>{
                    let userRoleList = res.data;
                    console.log(userRoleList)

                    this.$refs.multipleTable.clearSelection();//清理选中的数据
                    let arr  = [];
                    for (let i = 0; i < userRoleList.length; i++) {
                        let ur = userRoleList[i];
                        // ur.rid//角色id  查找角色对象
                        for (let j = 0; j < this.roleList.length; j++) {
                            let r = this.roleList[j];
                            if(r.id==ur.rid){
                                arr.push(r);
                            }
                        }
                    }

                    arr.forEach(row => {
                        this.$refs.multipleTable.toggleRowSelection(row);
                    });



                })


            },



            handleSizeChange(val) {
                this.query.pageSize = val
            },
            handleCurrentChange(val) {
                this.query.page = val
            },
            initData(){
                axios.post(`/jiyun-user/findPageAdmin?page=${this.query.page}&pageSize=${this.query.pageSize}`,this.query).then(res=>{
                    console.log(res.data)
                    this.tableData = res.data.records;
                    this.total = res.data.total;

                    if(this.tableData.length==0&&this.query.page>1){
                        this.query.page--
                    }
                })

            },
            initTenantData(){
                axios.post(`/tenant/findAll`).then(res=>{
                    this.tenantList = res.data;
                })
            },
            initRoleList(){
                axios.post(`/role/findAll`).then(res=>{
                    this.roleList = res.data;
                })
            }

        },
        created(){
            this.initData()
            this.initTenantData();
            this.initRoleList();
        }
    })
</script>

</body>
</html>